<template>
    <div class="Lo_enroll">
        <header>
        <p>登录</p>
    </header>
    <main>
        <section class="Lo_enroll_qie">
           

<p class="kui" :class='{artive:isShow==1}' @click='isShow = 1'>快捷登录</p>

<p class="enroll_prower" :class='{artive:isShow==2}' @click='isShow = 2'>密码登录</p>
        </section>
        <section class="Lo_enroll_inp">
            <article class="Lo_enroll_inpT">
                    <input v-model='username' class="Lo_enroll_phone" type="text" placeholder="请输入手机号">
                    <img class="eneroll_x" src="../../../static/imgs/enroll_x.png">
            </article>
            <article class="Lo_enroll_inpD">
                    <input class="Lo_enroll_xin " type="text" placeholder="请输入短信验证码" v-show='isShow==1'>  
                    <input v-model='password' class="enroll_wang" type="text" placeholder="请输入您的密码" v-show='isShow==2'>
                    <p class="enroll_huo" v-show='isShow==1'>获取验证码</p>
                    <p class="enroll_wang " v-show='isShow==2'>&nbsp忘记密码</p>
            </article>
        </section>

        <!-- 点击登陆跳转 -->
        <article class="enroll_to_Login">
                <p>登陆</p>
        </article>

        <!-- 跟随切换变化 -->
        <article class="enroll_text" @click=''>
                <p>未注册手机验证后自动注册</p>
        </article>

        <article class="enroll_ig">
            <img src="../../../static/imgs/enroll__03.png" alt="">
            <img src="../../../static/imgs/enroll__05.png" alt="">
            <img src="../../../static/imgs/enroll__07.png" alt="">
    
        </article>
        <article class="Down_p">
            <input class="check" type="checkbox" checked="true"> 我同意
            <span>《用户服务协议》</span>
        </article>
        

    </main>

    </div>
</template>
<script>
    export default {
        name:'Lo_enroll',
        data:function(){
            return {
                isShow:1
              
            }
        }
    }

</script>
<style scoped lang='less'>
.px2rem(@name, @px){
    @{name}: @px / 75 * 1rem;
}
.Flex{
    display:flex;
}
.line-height(@arg){.px2rem(line-height, @arg);}
.font-size(@arg){.px2rem(font-size, @arg);}


.margin-top(@top){.px2rem(margin-top, @top);}
.margin-right(@right){.px2rem(margin-right, @right);}
.margin-left(@left){.px2rem(margin-left, @left);}
.Lo_enroll_qie{
    .Flex;
    justify-content:space-between;
    p{
        padding: 5% 2%;
        .px2rem(font-size,35);
    }
    p.artive{
        color:#1ac5a1;
        border-bottom: 5px solid #1ac5a1;
    }
}

html,body{
    height:100%;
    width:100%;
}
header{
    background: url(../../../static/imgs/Reg_serve_bg01.jpg);
    .px2rem(height,88);
    .px2rem(font-size,40);
    .Flex;
   justify-content:center;
    align-items:center;

      p{
        margin-left: 5%;
        .margin-left(-20);
      }
      img{
        .px2rem(width,55);
        .px2rem(height,53);
      }
}
main{
    .px2rem(padding-right,60);
    .px2rem(padding-left,60);

}


.Lo_enroll_inp{
        .px2rem(font-size,30);
        .margin-top(80);
        input{
            border:none;
        }
        .Lo_enroll_inpT{
            border-bottom:1px solid #ccc;
            padding:8% 0;
            .Flex;
            justify-content:space-between;
            input{
                .px2rem(height,45);
            }
            img{
                .px2rem(width,48);
                .px2rem(height,45);
            }
            .eneroll_x{
                display:none;
            }
        }
        .Lo_enroll_inpD{
            padding:5% 0;
            .Flex;
            .px2rem(height,45);
            justify-content:space-between;
            border-bottom:1px solid #ccc;
            input{
                border-right: 1px solid #1ac5a1;
            }
            p{
                
                color:#1ac5a1;
                .px2rem(padding-left,40);
            }
        }


}


.enroll_to_Login{
    .margin-top(80);
    p{
        width:100%;
        .px2rem(height,90);
        text-align: center;
        .line-height(90);
        background:#1ac5a1;
        color:#ffffff;
        .px2rem(font-size,40);
        .px2rem(border-radius,10);
    }
}

.enroll_text{
        .margin-top(50);
        P{
            text-align:center;
            color:#a8a8a8;
            .px2rem(font-size,28);
        }
}

.enroll_ig{
    .px2rem(padding-right,30);
    .px2rem(padding-left,30);
    .margin-top(180);
    .Flex;
    justify-content:space-around;
    img{
        .px2rem(width,64);
        .px2rem(height,52);
    }

}

.Down_p{
    .margin-top(100);
    .Flex;
    justify-content:center;
    .check{
        .px2rem(width,30);
        .px2rem(height,30);
        border: 1px solid #1ac5a1;
        color:#1ac5a1;
        display:block;
        .margin-right(15);
    }
    span{
        color:#1ac5a1;
    }
}

</style>



